/******************** 变量 ********************/
$lv-autocomplete-theme: $popup-background !default;
$lv-autocomplete-border-color: $primary-color !default;
$lv-autocomplete-normal-color: $text-color !default;
$lv-autocomplete-hover-color: $primary-color !default;
$lv-autocomplete-active-color: $primary-color !default;
$lv-autocomplete-splitline: $separate-line-color !default;

/******************** mixin ********************/

/******************** 组件 ********************/
.lv-autocomplete-panel {
  width: 100%;

  > .lv-autocomplete-content {
    @include PanelBorderBox();

    background: $lv-autocomplete-theme;

    > ul {
      width: 100%;
      min-width: 1rem;
      max-height: $panel-height-base;
      margin: 0;
      padding: 0;
      overflow: auto;

      @include component-scroll;

      li {
        > .lv-autocomplete-item {
          display: flex;
          align-items: center;
          justify-content: space-around;
          min-height: $height-base;
          padding: 0 $padding-sm;
          color: $lv-autocomplete-normal-color;
          cursor: pointer;

          > span {
            display: inline-block;
            width: 100%;
          }

          &:not(.lv-autocomplete-item-selected):hover {
            background: $lv-autocomplete-bg-color-hover;
          }

          &:not(.lv-autocomplete-item-selected):active {
            color: $lv-autocomplete-active-color;
            background: $lv-autocomplete-bg-color-hover;
          }

          &.lv-autocomplete-item-active {
            color: $lv-autocomplete-hover-color;
            background: $lv-autocomplete-bg-color-hover;
          }

          &.lv-autocomplete-item-selected {
            @include panel-option-selected;

            // TODO 对高亮进行优化，不对外暴露，可提供成方法
            .lv-highlight-content > i {
              color: $primary-color;
              font-weight: $font-weight-regular;
            }
          }
        }

        > .lv-autocomplete-divider {
          padding: $padding-xs 0;

          &::after {
            display: block;
            height: 0.01rem;
            background: $lv-autocomplete-splitline;
            content: '';
          }
        }
      }
    }

    &.lv-autocomplete-size-large {
      > ul {
        max-height: $panel-height-lg;

        li {
          > .lv-autocomplete-item {
            min-height: $height-lg;
          }
        }
      }
    }
  }

  > .lv-autocomplete-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $padding-sm 0;
    line-height: $height-base;
    background: $lv-autocomplete-theme;

    @include PanelBorderBox();

    span:last-child {
      padding-left: $padding-sm;
    }

    .lv-icon-loading {
      @include icon-size;
    }
  }

  > .lv-autocomplete-nodata {
    background: $lv-autocomplete-theme;

    @include PanelBorderBox();

    > .lv-autocomplete-nodata-default {
      @include panel-dropdown-empty-style;
    }
  }
}

.lv-autocomplete-z-index {
  z-index: $zindex-autocomplete;
}
